<template>
  <div class="app-container">
    <el-form
      size="mini"
      :inline="true"
      label-width="150px"
      :model="formInline"
      class="demo-form-inline"
      :rules="rules"
    >
      <el-form-item label="Location" prop="region"> 
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Location">
        <el-select v-model="formInline.region" placeholder="Location">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
      <el-form-item prop="datetimerange" label="time-range">
        <el-date-picker
          type="daterange"
          range-separator="to"
          start-placeholder="start-time"
          end-placeholder="end-time"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="selectRecent" label="selectRecent">
        <el-input-number
          v-model="dataForm.selectRecent"
          placeholder="selectRecent"
          :min="1"
          step-strictly
          controls-position="right"
        />
        <span class="input-number-innertext" style="top: 2px; right: 35px;">runs</span>
      </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="chart-review-type">
          <el-radio-group v-model="dataForm.chartReviewType">
            <el-radio-button label="indicator">indicator-chart</el-radio-button>
            <el-radio-button label="rawTrace">raw-trace-chart</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.chartReviewType === 'indicator'" prop="controlPlanId" label="controlPlanName">
          <el-select v-model="dataForm.controlPlanId" placeholder="controlPlanName" clearable filterable allow-create default-first-option value="controlPlanId">
            <el-option value="control" label="controlPlanName" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="info" >show-runs</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"])
  },
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      controlPlanList: [],
      dataForm: {
        locationName: "", // Optional
        moduleName: "", // Optional
        toolGroupId: null,
        chamberGroupId: null,
        subRecipes: [],
        lotIds: [],
        waferIds: [],
        mesProducts: [],
        mesStages: [],
        mesLots: [],
        mesWafers: [],
        mesFlowRecipes: [],
        toolIds: [], // Optional
        chamberIds: [], // Optional
        datetimerange: [], // Optional, 开始日期, 结束日期
        selectRecent: 100,
        controlPlanId: null, // Optional
        chartReviewType: "indicator" // ChartReview 要显示的 Chart 类型: Indicator / RawTrace
      },
       rules: {
          region: [
            { required: true, trigger: 'blur' }
          ]
          },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style >
label {
  font-weight: 500 !important;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
